<template>
  <div class="mv">
    <div
      class="mvs"
      v-for="(item, index) in mv"
      :key="index"
      @mouseenter="jinru(index)"
      @mouseleave="likai"
    >
      <a href="">
        <img :src="`${item.url}`" alt="" ref="ig" />
      </a>
      <div class="mvinfo">
        <a href="">
          <span style="font-size: 16px">{{ item.mvname }}</span>
        </a>
        <br />
        <a href="#" class="change">
          <span>{{ item.name }}</span>
        </a>
      </div>

      <a href="">
        <transition name="fade">
          <div class="el-icon-video-play" v-show="index == currendId"></div>
        </transition>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Mv",
  data() {
    return {
      mv: [
        {
          name: "薛之谦",
          mvname: "彩券",
          url: require("../assets/mv/1.png"),
        },
        {
          name: "黄明昊",
          mvname: "Blue",
          url: require("../assets/mv/2.png"),
        },
        {
          name: "王嘉尔/林俊杰",
          mvname: "过",
          url: require("../assets/mv/3.png"),
        },
        {
          name: "林俊杰",
          mvname: "最向往的地方",
          url: require("../assets/mv/4.png"),
        },
        {
          name: "BTOB 4U",
          mvname: "Show Your Love",
          url: require("../assets/mv/5.png"),
        },
        {
          name: "苏婉/吕书君",
          mvname: "我们的罗曼史",
          url: require("../assets/mv/6.png"),
        },
      ],
      currendId: -1,
    };
  },
  methods: {
    jinru(index) {
      this.currendId = index;
    },
    likai() {
      this.currendId = -1;
    },
    jin() {
      //   console.log(this.$refs.ig);
    },
  },
};
</script>

<style scoped>
.mv {
  height: 360px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  flex-direction: row;
  /* padding-top: 24px; */
  /* background-color: #f5f5f5; */
  border-radius: 10px;
  margin-top: 17px;
  margin-bottom: 16px;
  border: 1px solid #cdcdcd;
  padding: 17px;
  padding-bottom: 4px;
}
.mv:hover {
  transition: all 0.5s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
img {
  width: 222px;
  border-radius: 6px;
}
img:hover {
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.mvinfo {
  padding-left: 6px;
}
.change span {
  color: #bcbcbc;
}
.change span:hover {
  color: rgb(170, 169, 169);
}
.mvs {
  position: relative;
}
.el-icon-video-play {
  position: absolute;
  top: 40px;
  left: 89px;
  height: 108px;
  font-size: 48px;
  color: #de2e2e;
  opacity: 0.8;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
